<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/customer' }">客户列表</el-breadcrumb-item>
        <el-breadcrumb-item>授信表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <div class="customer-header">
          <!-- 查询条件 -->
          <el-row class="table-selbox">
            <!-- 查询条件表单 -->
            <el-form :inline="true" :model="formInline" >
              <!-- 客户名称 -->
              <el-form-item label="客户名称" prop="cusId"  v-if="btnSel">
                <el-select
                  v-model="formInline.cusId"
                  filterable
                  auto-complete="off"
                  placeholder="请选择"
                >
                  <!-- 循环所有客户 客户名称 客户ID -->
                  <el-option
                    v-for="(item,index) in cusList"
                    :key="index"
                    :label="item.cusName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 搜索 -->
              <el-form-item  v-if="btnSel">
                <el-button icon="el-icon-search" @click="selHandle">搜索</el-button>
              </el-form-item>
              <el-form-item style="float:right" v-if="btnDown">
                <!-- 下载图片 -->
                <el-button type="warning" icon="el-icon-picture-outline" @click="downImg">生成图片</el-button>
              </el-form-item>

              <el-form-item style="float:right" v-if="btnAdd">
                <!-- 添加 -->
                <el-button type="success" icon="el-icon-plus" @click="tbAdd">添加</el-button>
              </el-form-item>

              <el-form-item style="float:right" v-if="btnEdit">
                <!-- 编辑 -->
                <el-button type="primary" icon="el-icon-edit" @click="tbEdit">编辑</el-button>
              </el-form-item>
               <el-form-item style="float:right" v-if="btnDel">
                <!-- 删除 -->
                <el-button type="danger" icon="el-icon-delete" @click="tbDel">删除</el-button>
              </el-form-item>

            </el-form>
          </el-row>
        </div>
        <table cellspacing="0" cellpadding="0" class="customer-table" :model="tbModel" ref="cTable">
          <tbody>
            <tr>
              <td
                colspan="5"
                class="tcenter"
                style="height: 50px;font-size:16px;font-weight:400"
              >客户授信表</td>
            </tr>
            <tr>
              <td colspan="4" class="noborder" style="height: 50px;text-indent: 10px;">客户名称：{{ cusName }}</td>
              <td class="noborder tright">
                <span v-if="ctEdit">日期：{{ credibility.time | filterTime }}</span>
                <el-date-picker v-else type="date" placeholder="选择日期" v-model="tbModel.time" size="small"></el-date-picker>
              </td>
            </tr>
            <tr>
              <td class="tcenter" style="width: 50px;">序号</td>
              <td class="tcenter" style="width: 160px;">评定项目</td>
              <td class="tcenter" style="width: 50px;">分值</td>
              <td class="tcenter">评审依据</td>
              <td class="tcenter" style="width: 200px;">评分分值</td>
            </tr>
            <tr>
              <td class="tcenter">1</td>
              <td class="tcenter">公司类型</td>
              <td class="tcenter">10</td>
              <td>
                <ul>
                  <li>国有企业，上市公司或行业知名企业</li>
                  <li>合资性质企业或行业较知名企业</li>
                  <li>其他性质企业</li>
                </ul>
              </td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.t1 }}</span>
                <el-input-number v-else  v-model="tbModel.t1" :min="0" :max="10" size="small"></el-input-number>
              </td>
            </tr>
            <tr>
              <td class="tcenter">2</td>
              <td class="tcenter">注册资本</td>
              <td class="tcenter">10</td>
              <td>
                <ul>
                  <li>5000万元以上（含2000万元）</li>
                  <li>2000-5000万元（含2000万元）</li>
                  <li>2000万元以下</li>
                </ul>
              </td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.t2 }}</span>
                <el-input-number v-else  v-model="tbModel.t2" :min="0" :max="10" size="small"></el-input-number>
              </td>
            </tr>
            <tr>
              <td class="tcenter">3</td>
              <td class="tcenter">年销售额</td>
              <td class="tcenter">30</td>
              <td>
                <ul>
                  <li>年销售额在1000万元以上</li>
                  <li>年销售额在500-1000万元以上</li>
                  <li>年销售额在500万元以下</li>
                </ul>
              </td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.t3 }}</span>
                <el-input-number v-else  v-model="tbModel.t3" :min="0" :max="30" size="small"></el-input-number>
              </td>
            </tr>
            <tr>
              <td class="tcenter">4</td>
              <td class="tcenter">交易方式及财务状况</td>
              <td class="tcenter">25</td>
              <td>
                <ul>
                  <li>现金结算或基本无拖款现象</li>
                  <li>月结30-90天或偶尔出现逾期付款现象，但不超过60天</li>
                  <li>月结90天以上或经常出现逾期付款现象，且超过60天</li>
                </ul>
              </td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.t4 }}</span>
                <el-input-number v-else  v-model="tbModel.t4" :min="0" :max="25" size="small"></el-input-number>
              </td>
            </tr>
            <tr>
              <td class="tcenter">5</td>
              <td class="tcenter">公司规模</td>
              <td class="tcenter">5</td>
              <td>
                <ul>
                  <li>公司总人数200人以上</li>
                  <li>公司总人数100-200人以上</li>
                  <li>公司总人数100人以下</li>
                </ul>
              </td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.t5 }}</span>
                <el-input-number v-else  v-model="tbModel.t5" :min="0" :max="5" size="small"></el-input-number>
              </td>
            </tr>
            <tr>
              <td class="tcenter">6</td>
              <td class="tcenter">管理层情况</td>
              <td class="tcenter">5</td>
              <td>
                <ul>
                  <li>管理团队稳定，信用观念强</li>
                  <li>管理团队稳定，但无完善的管理制度</li>
                  <li>管理团队建设混乱</li>
                </ul>
              </td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.t6 }}</span>
                <el-input-number v-else  v-model="tbModel.t6" :min="0" :max="5" size="small"></el-input-number>
              </td>
            </tr>
            <tr>
              <td class="tcenter">7</td>
              <td class="tcenter">合作诚意</td>
              <td class="tcenter">5</td>
              <td>
                <ul>
                  <li>合作积极，沟通解决问题快速，能及时处理反馈意见</li>
                  <li>对问题处理拖拉，不接受协商等</li>
                </ul>
              </td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.t7 }}</span>
                <el-input-number v-else  v-model="tbModel.t7" :min="0" :max="5" size="small"></el-input-number>
              </td>
            </tr>
            <tr>
              <td class="tcenter">8</td>
              <td class="tcenter">业务关系强度</td>
              <td class="tcenter">5</td>
              <td>
                <ul>
                  <li>以本公司为主要供应商或与本公司业务持续两年以上</li>
                  <li>以本公司为次要供应商</li>
                </ul>
              </td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.t8 }}</span>
                <el-input-number v-else  v-model="tbModel.t8" :min="0" :max="5" size="small"></el-input-number>
              </td>
            </tr>
            <tr>
              <td class="tcenter">9</td>
              <td class="tcenter">合作前景</td>
              <td class="tcenter">5</td>
              <td>
                <ul>
                  <li>未来交易前景良好，以后发展对公司业务起到支持的情况</li>
                  <li>对今后公司发展不能起到支持作用</li>
                </ul>
              </td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.t9 }}</span>
                <el-input-number v-else  v-model="tbModel.t9" :min="0" :max="5" size="small"></el-input-number>
              </td>
            </tr>
            <tr>
              <td colspan="2" class="tcenter">评判分值总和</td>
              <td class="tcenter">100</td>
              <td class="tcenter">评判分值总和</td>
              <td class="tcenter">{{ sum }}</td>
            </tr>
            <tr>
              <td colspan="3" rowspan="9" class="tcenter">是否存在不良行为</td>
              <td style="text-indent: 10px;">(1) 过往2年内与我方合作曾发生过不良欠款、欠货或其他严重违约行为；</td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.b1 ? '是' : '否' }}</span>
                  <el-radio-group v-else v-model="tbModel.b1">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </td>
            </tr>
            <tr>
              <td style="text-indent: 10px;">(2) 经常不兑现承诺；</td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.b2 ? '是' : '否'}}</span>
                 <el-radio-group v-else v-model="tbModel.b2">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </td>
            </tr>
            <tr>
              <td style="text-indent: 10px;">(3) 出现不良债务纠纷，或严重的转移资产行为；</td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.b3 ? '是' : '否' }}</span>
                 <el-radio-group v-else v-model="tbModel.b3">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </td>
            </tr>
            <tr>
              <td style="text-indent: 10px;">(4) 资金实力不足，偿债能力较差</td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.b4 ? '是' : '否' }}</span>
                 <el-radio-group v-else v-model="tbModel.b4">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </td>
            </tr>
            <tr>
              <td style="text-indent: 10px;">(5) 生产、经营状况不良，严重亏损</td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.b5 ? '是' : '否'}}</span>
                  <el-radio-group v-else v-model="tbModel.b5">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </td>
            </tr>
            <tr>
              <td style="text-indent: 10px;">(6) 最近对方产品生产、销售出现连续严重下滑现象，或有不公正行为；</td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.b6 ? '是' : '否'}}</span>
                 <el-radio-group v-else v-model="tbModel.b6">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </td>
            </tr>
            <tr>
              <td style="text-indent: 10px;">(7) 发现有严重违法经营现象；</td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.b7 ? '是' : '否'}}</span>
                  <el-radio-group v-else v-model="tbModel.b7">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </td>
            </tr>
            <tr>
              <td style="text-indent: 10px;">(8) 出现国家机关责令停业、整改情况；</td>
              <td class="tcenter">
                <span v-if="ctEdit">{{ credibility.b8 ? '是' : '否' }}</span>
                 <el-radio-group v-else v-model="tbModel.b8">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </td>
            </tr>
            <tr>
              <td style="text-indent: 10px;">(9) 有被查封、冻结银行账号危险的。</td>
              <td  class="tcenter">
                <span v-if="ctEdit">{{ credibility.b9 ? '是' : '否'}}</span>
                 <el-radio-group v-else v-model="tbModel.b9">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
              </td>
            </tr>
            <tr>
              <td colspan="3" class="tcenter">信用等级评定</td>
              <td colspan="2" style="text-indent: 10px;">
                <span v-if="ctEdit">{{ credibility.l1 }}</span>
                <el-input v-else v-model="tbModel.l1" style="width: 95%;"  placeholder="请输入内容"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="3" class="tcenter">授信额度评定</td>
              <td colspan="2" style="text-indent: 10px;">
                <span v-if="ctEdit">{{ credibility.l2 }}</span>
                <el-input v-else v-model="tbModel.l2" style="width: 95%;"  placeholder="请输入内容"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="3" class="tcenter">销售总监审核</td>
              <td colspan="2" style="text-indent: 10px;">
                <span v-if="ctEdit">{{ credibility.l3 }}</span>
                <el-input v-else v-model="tbModel.l3" style="width: 95%;"  placeholder="请输入内容"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="3" class="tcenter">总经理审核</td>
              <td colspan="2" style="text-indent: 10px;">
                <span v-if="ctEdit">{{ credibility.l4 }}</span>
               <el-input v-else v-model="tbModel.l4" style="width: 95%;"  placeholder="请输入内容"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="3" class="tcenter">情况说明</td>
              <td colspan="2" style="text-indent: 10px;">
                <span v-if="ctEdit">{{ credibility.note }}</span>
                <el-input v-else v-model="tbModel.note" style="width: 95%;" placeholder="请输入内容"></el-input>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="card-line" v-if="!ctEdit">
            <!-- 添加-->
            <el-button type="primary" @click="onSubmit" v-if="btnAdd">添加</el-button>
            <!-- 修改 -->
            <el-button type="success" @click="onEdit" v-if="btnEdit">更新</el-button>
            <!-- 取消 初始化表单数据 -->
            <el-button  @click="reset">取消</el-button>
        </div>
      </el-card>
    </div>
    <img :src="htmlUrl"/>
  </div>
</template>

<script>
// 引入时间格式化插件
import moment from 'moment';
// 引入html2Canvas
import html2canvas from 'html2canvas';
import { _debounce } from '@/public/debounce';

export default {
  // 父组件传值子组件
  props: {
    // 按钮级权限
    btns: {
      type: Object
    }
  },

  // 无白屏刷新方法注入
  inject: ['reload'],

  // 监听
  watch: {
    // 按钮权限数据
    btns (val, oldVal) {
      // 刷新当前页
      this.reload();
    }
  },

  // 过滤器
  filters: {
    // 时间显示过滤
    filterTime (value) {
      return moment(value).format('YYYY-MM-DD') === 'Invalid date' ? '无' : moment(value).format('YYYY-MM-DD');
    }
  },

  computed: {
    sum: function () {
      let _this = this;
      return (
        parseInt(_this.tbModel.t1) +
        parseInt(_this.tbModel.t2) +
        parseInt(_this.tbModel.t3) +
        parseInt(_this.tbModel.t4) +
        parseInt(_this.tbModel.t5) +
        parseInt(_this.tbModel.t6) +
        parseInt(_this.tbModel.t7) +
        parseInt(_this.tbModel.t8) +
        parseInt(_this.tbModel.t9)
      );
    }
  },

  // 当前实例数据
  data () {
    return {
      htmlUrl: '',

      activeName: 'first',

      ctEdit: true,

      isSubmit: false,

      // 按钮显示隐藏  - 默认值
      btnSel: true,
      btnDel: true,
      btnUpload: true,
      btnDown: true,
      btnAdd: true,
      btnEdit: true,

      // 立项信息表单
      editForm: [],

      // 表单验证规则
      editFormRules: {},

      // 搜索条件
      formInline: {
        cusId: ''
      },

      id: '',
      cusName: '',
      cusId: '',
      tbModel: {
        time: '',
        t1: 0,
        t2: 0,
        t3: 0,
        t4: 0,
        t5: 0,
        t6: 0,
        t7: 0,
        t8: 0,
        t9: 0,

        b1: 0,
        b2: 0,
        b3: 0,
        b4: 0,
        b5: 0,
        b6: 0,
        b7: 0,
        b8: 0,
        b9: 0,
        sum: '',
        l1: '',
        l2: '',
        l3: '',
        l4: '',
        note: ''
      },

      cusList: [],

      credibility: {
        time: '',
        t1: 0,
        t2: 0,
        t3: 0,
        t4: 0,
        t5: 0,
        t6: 0,
        t7: 0,
        t8: 0,
        t9: 0,

        b1: 0,
        b2: 0,
        b3: 0,
        b4: 0,
        b5: 0,
        b6: 0,
        b7: 0,
        b8: 0,
        b9: 0,
        l1: '',
        l2: '',
        l3: '',
        l4: '',
        note: ''
      }
    };
  },

  // 创建实例后执行
  created () {
    // 获取所有客户
    this.getProlist();
  },

  methods: {
    // 根据客户ID匹配客户名称
    getCusName (id, parmas) {
      let _this = this;
      for (let i = parmas.length; i--;) {
        if (parmas[i].id === _this.cusId) {
          // 匹配客户数据源  初始化客户名称
          _this.cusName = parmas[i].cusName;
        }
      }
    },

    // 过滤显示
    tcusName (parmas) {
      let _this = this;
      for (let i = parmas.length; i--;) {
        if (parmas[i].id === _this.cusId) {
          // 匹配客户数据源  初始化客户名称
          _this.cusName = parmas[i].cusName;
        }
      }
      _this.selHandle();
    },

    // 图片下载
    downImg () {
      let _this = this;
      html2canvas(_this.$refs.cTable, {
        backgroundColor: '#fff'
      }).then(canvas => {
        let imgData = canvas.toDataURL('image/jpeg');
        _this.fileDownload(imgData);
      });
    },

    // 下载图片
    fileDownload (downloadUrl) {
      let _this = this;
      let aLink = document.createElement('a');
      aLink.style.display = 'none';
      aLink.href = downloadUrl;
      aLink.download = _this.cusName + '客户授信表.png';
      // 触发点击-然后移除
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
    },

    // 查询
    selHandle () {
      let _this = this;
      // 收集请求数据
      let params = {
        cusId: _this.formInline.cusId === null ? '' : _this.formInline.cusId
      };
      // 获取客户授信数据
      _this.$http.post('api/findCusTreeByCusId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 初始化客户ID
          _this.cusId = _this.formInline.cusId;
          // 初始化客户名称
          _this.getCusName(_this.cusId, _this.cusList);
          if (datas === null) {
            // 开放对应按钮
            _this.btnSel = true;
            _this.btnDel = false;
            _this.btnDown = false;
            _this.btnAdd = true;
            _this.btnEdit = false;

            _this.$message({
              message: '该客户无授信数据！',
              type: 'error'
            });
            // 初始化显示值
            _this.credibility = {
              time: '',
              t1: 0,
              t2: 0,
              t3: 0,
              t4: 0,
              t5: 0,
              t6: 0,
              t7: 0,
              t8: 0,
              t9: 0,

              b1: 0,
              b2: 0,
              b3: 0,
              b4: 0,
              b5: 0,
              b6: 0,
              b7: 0,
              b8: 0,
              b9: 0,
              l1: '',
              l2: '',
              l3: '',
              l4: '',
              note: ''
            };
            // 初始化input值
            _this.tbModel = {
              time: '',
              t1: 0,
              t2: 0,
              t3: 0,
              t4: 0,
              t5: 0,
              t6: 0,
              t7: 0,
              t8: 0,
              t9: 0,

              b1: 0,
              b2: 0,
              b3: 0,
              b4: 0,
              b5: 0,
              b6: 0,
              b7: 0,
              b8: 0,
              b9: 0,
              l1: '',
              l2: '',
              l3: '',
              l4: '',
              note: ''
            };
          } else {
            _this.id = datas.id;
            // 开放对应按钮
            _this.btnSel = true;
            _this.btnDel = true;
            _this.btnDown = true;
            _this.btnAdd = false;
            _this.btnEdit = true;
            // 数据结果集
            _this.credibility = JSON.parse(datas.tree);
            _this.tbModel = JSON.parse(datas.tree);
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 删除
    tbDel () {
      let _this = this;
      // 二次删除确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 修改状态，逻辑删除
        let params = [_this.id];

        // 根据数据ID删除对应用户信息
        _this.$http.raw('api/batchDelCusTree', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '删除成功！'
            });
            // 开放对应按钮
            _this.btnSel = true;
            _this.btnDel = false;
            _this.btnDown = false;
            _this.btnAdd = true;
            _this.btnEdit = false;
            // 查询
            _this.selHandle();
            _this.reset();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 添加
    tbAdd () {
      this.ctEdit = false;
    },

    // 编辑
    tbEdit () {
      this.ctEdit = false;
    },

    // 获取所有客户
    getProlist () {
      let _this = this;
      // 获取所有客户数据
      _this.$http.raw('api/findAllCus').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 获取所有客户数据
          _this.cusList = datas;

          // 搜索框初始化客户选中值
          _this.formInline.cusId = _this.$route.query.id;

          // 客户ID赋值
          _this.cusId = _this.$route.query.id;

          // 根据当前客户ID获取客户名称
          _this.tcusName(_this.cusList);
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 添加数据
    onSubmit: _debounce(function () {
      let _this = this;
      // 获取合计
      _this.tbModel.sum = _this.sum;
      // 获取请求数据
      let params = {
        cusId: _this.cusId,
        tree: JSON.stringify(_this.tbModel)
      };

      // 添加客户授权表
      _this.$http.raw('api/insertCusTree', params).then(res => {
        let { code } = res;
        if (code === 0) {
          _this.$message({
            message: '添加成功！',
            type: 'success'
          });
          // 开放对应按钮
          _this.btnSel = true;
          _this.btnDel = true;
          _this.btnDown = true;
          _this.btnAdd = false;
          _this.btnEdit = true;
          // 查询
          _this.selHandle();
          _this.reset();
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    }, 200),

    // 修改数据
    onEdit: _debounce(function () {
      let _this = this;
      // 获取合计
      _this.tbModel.sum = _this.sum;
      // 获取请求数据
      let params = {
        id: _this.id,
        cusId: _this.cusId,
        tree: JSON.stringify(_this.tbModel)
      };
      // 添加客户授权表
      _this.$http.raw('api/updateCusTree', params).then(res => {
        let { code } = res;
        if (code === 0) {
          _this.$message({
            message: '更新成功！',
            type: 'success'
          });
          // 查询
          _this.selHandle();
          _this.reset();
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    }, 200),

    // 取消操作
    reset: _debounce(function () {
      this.ctEdit = true;
    }, 200)
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
